@extends('home.article')
@section('title','堆糖任性修改')
@section('style')
    <script src="{{asset('js/jquery.js')}}"></script>
    <link href="{{ asset('umeditor1.2.3-utf8-php/themes/default/css/umeditor.css') }}" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="{{ asset('umeditor1.2.3-utf8-php/third-party/template.min.js') }}"></script>
    <script type="text/javascript" charset="utf-8" src="{{ asset('umeditor1.2.3-utf8-php/umeditor.config.js') }}"></script>
    <script type="text/javascript" charset="utf-8" src="{{ asset('umeditor1.2.3-utf8-php/umeditor.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('umeditor1.2.3-utf8-php/lang/zh-cn/zh-cn.js') }}"></script>
    <style>
        #box{
            width: 800px;
            height: auto;
            margin-left: 200px;
            text-align: center;
        }
        #article_title {
            width: 600px;
            height: 70px;

            font-size: 25px;
            font-weight: bold;
            vertical-align: bottom;
            border:none;
            padding-left: 15px;
            border-bottom: 2px solid lightgrey;
        }
        #article_content{
            margin-top:20px;
            border: none;
            font-size: 16px;
            padding: 5px;
        }
        #preview
        {
            width:800px;
            height:auto;
            text-align: center;
            border:none;
        }
        .img, img{
            width: 600px;
        }
        #upload{
            display: inline-block;
            width: 200px;
            height: 50px;
            border: 2px solid #fc8383;
            border-radius: 50px;
            font-size: 18px;
            color:#fc8383;
            line-height: 50px;
            cursor: pointer;
        }
    </style>
    @endsection
@section('content')
    <div id="box">
    <form action="{{url('user/articleedited')}}" method="post" enctype="multipart/form-data">
        {{csrf_field()}}

        @foreach($res as $v)
        <input type="hidden" name="id" value="{{$v['id']}}">
        <div id="preview"><img src="{{url('images/').'/'.$v['pic']}}" alt=""></div>
            <input type="file" name="pic" onchange="preview(this)" style="position: absolute;width: 200px;height: 50px;opacity: 0;cursor: pointer;" /><span id="upload">上传图片</span>
        <input type="text" name="title" id="article_title" value="{{$v['title']}}">
            <input type="hidden" id="content" name="contents" value="" >

            <script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
                    {!! $v['content'] !!}
             </script>
        <input type="submit" value="修改">
        @endforeach
    </form>
    </div>
    <script type="text/javascript">
        //实例化编辑器
        var um = UM.getEditor('myEditor');

        $('#myEditor').blur(function () {
            var content = UM.getEditor('myEditor').getContent();
            $('#content').val(content);
            //console.log(content);
        })
        function preview(file)
        {
            var prevDiv = document.getElementById('preview');
            if (file.files && file.files[0])
            {
                var reader = new FileReader();
                reader.onload = function(evt){
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                }
                reader.readAsDataURL(file.files[0]);
            }
            else
            {
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            }
        }
    </script>
@endsection